import React, { useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, message } from 'antd';
import '../assets/styles/login.css';

import { loginApi } from '../api/students';

export default function Register() {
    const [loading, setLoading] = useState(false)
    const navigate = useNavigate()
    const phoneRef = useRef();
    const passwordRef = useRef();
    console.log('===========', phoneRef);
    function login() {
        const phone = phoneRef.current.value
        const password = passwordRef.current.value
        // console.log(111111, '登录', phone, password);
        if (phone == '' || password == '') {
            message.warning('账号或密码不能为空！')
        } else {
            setLoading(true)
            loginApi({ phone: phone, password: password }).then(res => {
                setLoading(false)
                // console.log('登录成功', res);
                const token = res.token;
                console.log(token, 222222222);
                if (res.code === 1) {
                    message.success(res.msg);
                    localStorage.token = token;
                    navigate('/home', { replace: true })
                }
            }).catch(err => {
                console.log(err);
                setLoading(false)
            })
            phoneRef.current.value = '';
            passwordRef.current.value = '';
        }
    }
    return (
        <div className='big_box'>
            <div className='box_left'>
                <div className='login_logo'></div>
                <div className='login_title'>Welcome To Register</div>
                <div className='login_text'>欢迎注册考试系统</div>
                <div className='login_icon'></div>

                <div className='login_form_box'>
                    <label className='login_label_account' >账号</label>
                    <input type="text" className='login_ipt' ref={phoneRef} />
                    <label className='login_label_password'>密码</label>
                    <input type="password" className='login_ipt' ref={passwordRef} />
                    <div className="password_box">
                        <div className="remember_password">
                            <input type="checkbox" className='remember_passwordIpt' />记住密码
                        </div>
                        <div className="forgot_password">
                            <a href="#">忘记密码?</a>
                        </div>
                    </div>
                </div>
                <div className='login_btn_box'>
                    {/* <button className='login_btn' onClick={login}>登录</button> */}
                    <Button className='login_btn' onClick={login} loading={loading} type="primary">登录</Button>
                </div>
            </div>
            <div className='box'></div>
        </div>
    )
}
